<template>
  <div class="base-container">
    <div class="content">
      <!--      <t-message theme="error">-->
      <!--&lt;!&ndash;        <template slot="content" v-html="errors" style="display: flex;flex-direction: column">&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;          <div v-for="(item,index)  in errors" :key="index">&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;           {{item}}&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;          </div>&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;        </template>&ndash;&gt;-->
      <!--      </t-message>-->
      <div class="page_title">专家邀请页面</div>
      <t-form :data="formData" labelWidth="0px" @submit="submit">
        <div style="display: flex;justify-content: center">
          <t-button theme="primary" type="submit">提交</t-button>
        </div>
        <!--        <div class="help_list">-->
        <!--          <div class="help_item" v-for="(item,index) in helpList" :key="index">-->
        <!--            {{ item }}-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="form_item_title">账号信息</div>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>登录名：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_userName">
              <t-input clearable placeholder="请输入登录名" v-model="formData.sysUser.userName"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">邮箱：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_email">
              <t-input clearable placeholder="请输入邮箱" v-model="formData.sysUser.email"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title">民族：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser.national">
              <t-select :options="dictTypes.national" placeholder="请选择民族"
                v-model="formData.sysUser.national"></t-select>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">政治面貌：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_politicsStatus">
              <t-input clearable placeholder="请输入政治面貌" v-model="formData.sysUser.politicsStatus"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title">出生年月：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_birthDate">
              <t-date-picker v-model="formData.sysUser.birthDate"></t-date-picker>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">通讯地址：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_contactAds">
              <t-input clearable placeholder="请输入通讯地址" v-model="formData.sysUser.contactAds"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title">邮编：</t-col>
          <t-col :span="4">
            <t-form-item name="sysUser_postcode">
              <t-input clearable placeholder="请输入邮编" v-model="formData.sysUser.postcode"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <div class="form_item_title">银行信息</div>
        <t-row>
          <t-col :span="2" class="title">开户银行名称：</t-col>
          <t-col :span="4">
            <t-form-item name="expertBank.bankName">
              <t-input clearable placeholder="请输入通讯地址" v-model="formData.expertBank.bankName"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">开户户名：</t-col>
          <t-col :span="4">
            <t-form-item name="expertBank.bankUsername">
              <t-input clearable placeholder="请输入开户户名" v-model="formData.expertBank.bankUsername"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title">开户账号：</t-col>
          <t-col :span="4">
            <t-form-item name="expertBank.accountName">
              <t-input clearable placeholder="请输入开户账号" v-model="formData.expertBank.accountName"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">所属支行名称：</t-col>
          <t-col :span="4">
            <t-form-item name="expertBank.bankDetailName">
              <t-input clearable placeholder="请输入支行名称" v-model="formData.expertBank.bankDetailName"></t-input>
            </t-form-item>
          </t-col>
        </t-row>

        <div class="form_item_title">基本信息</div>

        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>专家姓名：</t-col>
          <t-col :span="4">
            <t-form-item name="expertName">
              <t-input clearable placeholder="请输入专家姓名" v-model="formData.expertName"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span> 性别：</t-col>
          <t-col :span="4">
            <t-form-item name="sex">
              <t-radio-group v-model="formData.sex" :options="dictTypes.sys_user_sex"></t-radio-group>
            </t-form-item>
          </t-col>
        </t-row>
        <!--        <t-row>-->
        <!--          <t-col :span="2" class="title">证件类型：</t-col>-->
        <!--          <t-col :span="4"></t-col>-->
        <!--          <t-col :span="2" class="title">证件号码：</t-col>-->
        <!--          <t-col :span="4" > <t-form-item  name="idCard">-->
        <!--            <t-input clearable placeholder="请输入证件号码" v-model="formData.idCard" ></t-input>-->
        <!--          </t-form-item></t-col>-->
        <!--        </t-row>-->
        <t-row>
          <t-col :span="2" class="title">出生年月：</t-col>
          <t-col :span="4">
            <t-form-item name="birthDate">
              <t-date-picker v-model="formData.birthDate"></t-date-picker>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>民族：</t-col>
          <t-col :span="4">
            <t-form-item name="national">
              <t-select v-model="formData.national" clearable placeholder="请选择民族" :options="dictTypes.national">
              </t-select>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>单位名称：</t-col>
          <t-col :span="10">
            <t-tree-select clearable :treeProps="{ keys: { value: 'id', label: 'deptName' } }" v-model="formData.departmentId"
              :data="menuOptions" placeholder="选择单位"></t-tree-select>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>单位性质：</t-col>
          <t-col :span="4">
            <t-form-item name="coNature">
              <t-radio-group v-model="formData.coNature" :options="dictTypes.co_nature"></t-radio-group>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>单位所在地：</t-col>
          <t-col :span="4">
            <t-form-item name="coAddress">
              <t-input clearable placeholder="请输入单位所在地" v-model="formData.coAddress"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>职务：</t-col>
          <t-col :span="10">
            <t-form-item name="duty">
              <t-checkbox-group v-model="formData.duty" :options="dictTypes.duty">
              </t-checkbox-group>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <!--          <t-col :span="2" class="title">*技术职称：</t-col>-->
          <!--          <t-col :span="4">-->
          <!--            <t-form-item name="profTit">-->
          <!--              <t-select v-model="formData.profTit" clearable  placeholder="请选择技术职称" :options="dictTypes.profTit">-->
          <!--              </t-select>-->
          <!--            </t-form-item>-->
          <!--          </t-col>-->
          <t-col :span="2" class="title"><span class="require">*</span>身份证号：</t-col>
          <t-col :span="4">
            <t-form-item name="idCard">
              <t-input clearable placeholder="请输入身份证号码" v-model="formData.idCard"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>职称级别：</t-col>
          <t-col :span="4">
            <t-form-item name="profTit">
              <t-select v-model="formData.profTit" clearable placeholder="请选择职称级别" :options="dictTypes.prof_tit">
              </t-select>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>最高学历：</t-col>
          <t-col :span="4">
            <t-form-item name="education">
              <t-select v-model="formData.education" clearable placeholder="请选择学历" :options="dictTypes.education">
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>最后学位：</t-col>
          <t-col :span="4">
            <t-form-item name="degree">
              <t-select v-model="formData.degree" clearable placeholder="请选择学位" :options="dictTypes.degree">
              </t-select>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>最后学历毕业时间：</t-col>
          <t-col :span="4">
            <t-form-item name="degreeDate">
              <t-date-picker v-model="formData.degreeDate" clearable />
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>最后学位获取时间：</t-col>
          <t-col :span="4">
            <t-form-item name="educationDate">
              <t-date-picker v-model="formData.educationDate" clearable />
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>毕业院校：</t-col>
          <t-col :span="4">
            <t-form-item name="school">
              <t-input clearable placeholder="请输入毕业院校" v-model="formData.school"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>获得最终学位院校：</t-col>
          <t-col :span="4">
            <t-form-item name="degreeSchool">
              <t-input clearable placeholder="请输入最终学位院校" v-model="formData.degreeSchool"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>所学专业：</t-col>
          <t-col :span="4">
            <t-form-item name="majorName">
              <t-input clearable placeholder="请输入所学专业" v-model="formData.majorName"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>现从事专业：</t-col>
          <t-col :span="4">
            <t-form-item name="majorNowName">
              <t-input clearable placeholder="请输入现从事专业" v-model="formData.majorNowName"></t-input>
            </t-form-item>
          </t-col>
        </t-row>

        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>专家省份：</t-col>
          <t-col :span="4">
            <t-form-item name="province">
              <t-input clearable placeholder="请输入专家省份" v-model="formData.province"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title"><span class="require">*</span>省内或省外专家：</t-col>
          <t-col :span="4">
            <t-form-item name="ioProvince">
              <t-select v-model="formData.ioProvince" clearable placeholder="请选择" :options="dictTypes.io_province">
              </t-select>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>移动电话：</t-col>
          <t-col :span="4">
            <t-form-item name="phoneNumber">
              <t-input clearable placeholder="请输入移动电话" v-model="formData.phoneNumber"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">办公电话：</t-col>
          <t-col :span="4">
            <t-form-item name="telephone">
              <t-input clearable placeholder="请输入办公电话" v-model="formData.telephone"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>电子信箱：</t-col>
          <t-col :span="10">
            <t-form-item name="email">
              <t-input clearable placeholder="请输入电子信箱" v-model="formData.email"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>通讯地址：</t-col>
          <t-col :span="4">
            <t-form-item name="contactAds">
              <t-input clearable placeholder="请输入通讯地址" v-model="formData.contactAds"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="2" class="title">邮政编码：</t-col>
          <t-col :span="4">
            <t-form-item name="postcode">
              <t-input clearable placeholder="请输入邮政编码" v-model="formData.postcode"></t-input>
            </t-form-item>
          </t-col>
        </t-row>
        <!--        <t-row >-->
        <!--          <t-col :span="2" class="title">*是否有承担国家级项目：</t-col>-->
        <!--          <t-col :span="10">-->
        <!--&lt;!&ndash;            <t-form-item name="sex">&ndash;&gt;-->
        <!--&lt;!&ndash;              <t-radio-group  v-model="formData.sex" :options="dictTypes.sys_user_sex"></t-radio-group>&ndash;&gt;-->
        <!--&lt;!&ndash;            </t-form-item>&ndash;&gt;-->
        <!--          </t-col>-->
        <!--        </t-row>-->
        <t-row>
          <t-col :span="2" class="title">专家荣誉：</t-col>
          <t-col :span="10">
            <t-form-item name="expertHonorary">
              <t-checkbox-group v-model="formData.expertHonorary" :options="dictTypes.expert_honorary">
              </t-checkbox-group>
            </t-form-item>

          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title">专家经验：</t-col>
          <t-col :span="10">
            <t-form-item name="exportExpertise">
              <t-checkbox-group v-model="formData.exportExpertise" style="flex-direction: column"
                :options="dictTypes.expert_expertise">
              </t-checkbox-group>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2" class="title"><span class="require">*</span>专家分类：</t-col>
          <t-col :span="10">
            <div class="expert_category_body">
              <div class="expert_category_item" v-for="(item, index) in dictTypes.expert_category" :key="index">
                <div class="expert_category">{{ item.label }}</div>
                <t-form-item name="expertSubclass">
                  <t-checkbox-group v-model="formData.expertSubclass[index]" :key="index" style="flex-direction: column"
                    :options="filterExpertSubclass(item.value)">
                  </t-checkbox-group>
                </t-form-item>

              </div>
            </div>
          </t-col>

        </t-row>
      </t-form>
    </div>
  </div>
</template>

<script>
import { getDictList } from "@/api/system/dict/data";
import { listDept } from "@/api/system/dept";


export default {
  name: "expert-invite",
  data () {
    return {
      helpList: [
        "填写注意：",
        "1、专家信息提交后，需等待交通厅审核，交通厅审核通过后您将成为正式的评审专家。",
        "2、带红色*号的为必填项。"
      ],
      errors: "",
      formData: {
        expertName: '',
        phoneNumber: '',
        telephone: '',
        departmentId: null,
        majorName: '',
        secondMajor: '',
        classification: '',
        idCard: '',
        duty: [],
        profTit: '',
        performance: '',
        education: '',
        degree: '',
        degreeDate: '',
        educationDate: '',
        school: '',
        degreeSchool: '',
        majorNowName: '',
        externalCo: '',
        coNature: '',
        coAddress: '',
        province: '',
        ioProvince: '',
        academicSuccess: '',
        expertHonorary: [],
        expertSubclass: [],
        sex: "0",
        sysUser: {
          birthDate: '',
          national: '',
          userName: '',
          email: '',
          politicsStatus: '',
          contactAds: '',
          postcode: '',
        },
        expertBank: {
          bankName: '',
          bankUsername: '',
          accountName: '',
          bankDetailName: '',
        },
      },
      menuOptions: [],
      dictTypes: {},
      tabValue: '0',
    }
  },
  watch: {
    formData: {
      handler (val) {
        console.log(val, "111")
        sessionStorage.setItem("expert_form", JSON.stringify(val));
      },
      deep: true
    }
  },
  created () {

    // Promise.all([getDictList(["sys_user_sex", "national", "duty", "prof_tit", "education", "degree", "co_nature", "io_province", "expert_expertise", "expert_honorary", "expert_category", "expert_subclass"])
    //   , listDept()]).then(res => {
    //   this.dictTypes = res[0].data;
    //   this.menuOptions = this.handleTree(res[1].data, "id");
    // }).catch((e) => {
    //   this.$message.error(e.toString());
    // })
    this.getTreeselect();
    this.getDataTypes();

  },
  mounted () {
    if (sessionStorage.getItem("expert_form")) {
      const data = JSON.parse(sessionStorage.getItem("expert_form"));
      this.formData = data;
    }
  },
  methods: {
    /** 查询菜单下拉树结构 */
    getTreeselect () {
      listDept().then(response => {
        this.menuOptions = [];
        this.menuOptions = this.handleTree(response.data, "id");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    submit () {
      const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      const idCardPattern = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
      const errors = [];

      if (this.formData.sysUser.userName === "") {
        errors.push("账号信息:登录名不能为空");
      }
      if (this.formData.sysUser.userName !== "") {
        const userNamePattern = /^[a-zA-Z0-9_-]{4,16}$/;
        if (!userNamePattern.test(this.formData.sysUser.userName)) {
          errors.push("账号信息:登录名4到16位（字母，数字，下划线，减号）");
        }
      }
      if (this.formData.sysUser.email !== "") {
        if (!emailPattern.test(this.formData.sysUser.email)) {
          errors.push("账号信息:邮箱格式错误");
        }
      }

      if (this.formData.expertName === "") {
        errors.push("基本信息:专家姓名不能为空");
      }
      if (this.formData.national === "") {
        errors.push("基本信息:民族不能为空");
      }
      if (!this.formData.departmentId) {
        errors.push("基本信息:单位名称不能为空");
      }
      if (!this.formData.duty) {
        errors.push("基本信息:职务不能为空");
      }
      if (!this.formData.idCard) {
        errors.push("基本信息:身份证号码不能为空");
      }
      if (this.formData.idCard !== "" && !idCardPattern.test(this.formData.idCard)) {
        errors.push("基本信息:身份证号码格式错误");
      }
      if (!this.formData.profTit) {
        errors.push("基本信息:职称级别不能为空");
      }
      if (!this.formData.education) {
        errors.push("基本信息:最高学历不能为空");
      }
      if (!this.formData.degree) {
        errors.push("基本信息:最后学位不能为空");
      }
      if (!this.formData.degreeDate) {
        errors.push("基本信息:最后学历毕业时间不能为空");
      }
      if (!this.formData.educationDate) {
        errors.push("基本信息:最后学位获取时间不能为空");
      }
      if (!this.formData.school) {
        errors.push("基本信息:毕业院校不能为空");
      }
      if (!this.formData.degreeSchool) {
        errors.push("基本信息:获得最终学位院校不能为空");
      }
      if (!this.formData.majorName) {
        errors.push("基本信息:所学专业不能为空");
      }
      if (!this.formData.majorNowName) {
        errors.push("基本信息:现从事专业不能为空");
      }
      if (!this.formData.province) {
        errors.push("基本信息:专家省份不能为空");
      }
      if (!this.formData.ioProvince) {
        errors.push("基本信息:省内或省外专家不能为空");
      }
      if (!this.formData.phoneNumber) {
        errors.push("基本信息:移动电话不能为空");
      }
      if (!this.formData.email) {
        errors.push("基本信息:电子信箱不能为空");
      }
      if (this.formData.email !== "" && !emailPattern.test(this.formData.email)) {
        errors.push("基本信息:电子信箱格式错误");
      }
      if (!this.formData.contactAds) {
        errors.push("基本信息:通讯地址不能为空");
      }
      this.errors = errors.join("\n\r")
      const expertCategory = [];
      const expertSubclass = [];
      this.formData.expertSubclass.forEach((val, index) => {
        expertCategory.push((index + 1).toString());
        expertSubclass.push(...val);
      })
      if (expertSubclass.length <= 0) {
        errors.push("基本信息:专家分类不能为空");
      }
      console.log(errors, "1111");
      // this.$message.error({
      //   content:(
      //     <div>
      //       操作有误，<a href="#">前往查看</a>
      //     </div>
      //   ),
      // });
      const data = {
        ...this.formData,
        duty: this.formData.duty.join(","),
        expertHonorary: this.formData.expertHonorary.join(","),
        expertCategory: expertCategory.join(","),
        expertSubclass: expertSubclass.join(",")
      }
      console.log(data);
    },
    filterExpertSubclass (key) {
      return this.dictTypes.expert_subclass.filter((val) => val.value.includes(`${key}-`))
    },
    getDataTypes () {
      getDictList(["sys_user_sex", "national", "duty", "prof_tit", "education", "degree", "co_nature", "io_province", "expert_expertise", "expert_honorary", "expert_category", "expert_subclass"]).then(response => {
        this.dictTypes = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.base-container {
  display: flex;
  justify-content: center;

  .content {
    width: 980px;
    padding: 15px 20px 25px;
    border: 1px solid #a1c0dc;

    .help_list {
      display: flex;
      flex-direction: column;

      .help_item {
        color: red;
      }
    }

    .page_title {
      display: flex;
      justify-content: center;
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    .form_item_title {
      display: flex;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    .expert_category {
      margin-bottom: 10px;
      margin-top: 10px;
      font-weight: bold;
    }

    .t-row {
      align-items: stretch;

      .t-form__item {
        width: 100%;
      }

      .require {
        color: red;
        margin-right: 3px;
      }

      .t-col {
        border: 1px solid #ddd;
        color: #333;
        min-height: 37px;
        padding: 4px !important;
        overflow: hidden;
        display: flex;
        align-items: center;
      }

      .title {
        background-color: #F1F1F1;
        justify-content: flex-end;
      }
    }
  }
}
</style>
